<template>
  <xtx-dialog
    :title="`${form.id ? '修改' : '添加'}收货地址`"
    v-model="dialogVisable"
    class="dialog"
  >
    <div class="address-edit">
      <div class="form">
        <div class="form-item">
          <div class="label">收货人：</div>
          <div class="field">
            <input
              v-model="form.receiver"
              type="text"
              class="input"
              placeholder="请输入收货人"
            />
          </div>
        </div>
        <div class="form-item">
          <div class="label">手机号：</div>
          <div class="field">
            <input
              v-model="form.contact"
              type="text"
              class="input"
              placeholder="请输入手机号"
            />
          </div>
        </div>
        <div class="form-item">
          <div class="label">地区：</div>
          <div class="field">
            <XtxCity
              :fullLocation="form.fullLocation"
              @change="changeCity"
              placeholder="请选择所在地区"
            />
          </div>
        </div>
        <div class="form-item">
          <div class="label">详细地址：</div>
          <div class="field">
            <input
              v-model="form.address"
              type="text"
              class="input"
              placeholder="请输入详细地址"
            />
          </div>
        </div>
        <div class="form-item">
          <div class="label">邮政编码：</div>
          <div class="field">
            <input
              v-model="form.postalCode"
              type="text"
              class="input"
              placeholder="请输入邮政编码"
            />
          </div>
        </div>
        <div class="form-item">
          <div class="label">地址标签：</div>
          <div class="field">
            <input
              v-model="form.addressTags"
              type="text"
              class="input"
              placeholder="请输入地址标签，逗号隔开"
            />
          </div>
        </div>
      </div>
    </div>
    <template #footer>
      <XtxButton @click="cancle()" type="gray" style="margin-right: 20px"
        >取消</XtxButton
      >
      <XtxButton @click="submit()" type="primary">确认</XtxButton>
    </template>
  </xtx-dialog>
</template>

<script>
import { ref, reactive } from 'vue'
import { addAddress, editAddress } from '@/api/order'
import { message } from '@/components/library/message'
import { stop, move } from '@/utils/dialog'
export default {
  name: 'AddressEdit',
  setup(props, { emit }) {
    // 对话框
    const dialogVisable = ref(false)
    // 打开对话框函数
    const open = (address) => {
      dialogVisable.value = true
      stop()
      if (address.id) {
        // 如果修改 填充表单
        for (const key in address) {
          form[key] = address[key]
        }
      } else {
        // 如果添加 清空表单
        for (const key in form) {
          if (key === 'isDefault') {
            form[key] = 1
          } else {
            form[key] = null
          }
        }
      }
    }

    // 表单数据
    const form = reactive({
      receiver: null,
      contact: null,
      provinceCode: null,
      cityCode: null,
      countyCode: null,
      address: null,
      postalCode: null,
      addressTags: null,
      isDefault: 1,
      // 城市组件显示文字（完整行政区地址）
      fullLocation: null
    })
    // 选择地区
    const changeCity = (data) => {
      form.provinceCode = data.provinceCode
      form.cityCode = data.cityCode
      form.countyCode = data.countyCode
      form.fullLocation = data.fullLocation
    }
    // 取消
    const cancle = () => {
      dialogVisable.value = false
      move()
    }
    // 提交表单
    const submit = () => {
      // 检验
      if (!form.receiver) {
        return message({ message: '请输入收货人', type: 'warn' })
      }
      if (!form.contact) {
        return message({ message: '请输入手机号', type: 'warn' })
      }
      if (!/^1[3-9]\d{9}$/.test(form.contact)) {
        return message({ message: '手机号格式不正确', type: 'warn' })
      }
      if (!form.fullLocation) {
        return message({ message: '请选择收获地区', type: 'warn' })
      }
      if (!form.address) {
        return message({ message: '请输入详细地址', type: 'warn' })
      }
      if (!form.postalCode) {
        return message({ message: '请输入邮政编码', type: 'warn' })
      }
      if (form.postalCode && !/^\d{6}$/.test(form.postalCode)) {
        return message({ message: '邮政编码格式不对', type: 'warn' })
      }

      //   发送请求
      if (form.id) {
        // 修改请求
        editAddress(form).then((data) => {
          // 提示
          message({ type: 'success', message: '修改收货地址成功' })
          // 关闭
          dialogVisable.value = false
          // 触发自定义事件
          emit('on-success', form)
          move()
        })
      } else {
        // 添加请求
        addAddress(form).then((data) => {
          // 需要设置ID
          form.id = data.result.id
          // 提示
          message({ type: 'success', message: '添加收货地址成功' })
          // 关闭
          dialogVisable.value = false
          // 触发自定义事件
          emit('on-success', form)
          move()
        })
      }
    }
    return { dialogVisable, open, form, changeCity, submit, cancle }
  }
}
</script>
<style scoped lang="less">
.dialog {
  :deep(.wrapper) {
    width: 895px;
    .body {
      font-size: 14px;
    }
  }
  .form-item .field .input:active,
  .form-item .field .input:focus {
    border-color: #27ba9b !important;
  }
  .form {
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    .form-item {
      display: flex;
      align-items: center;
      //   width: 700px;
      padding-bottom: 25px;
      //   margin: 0 auto;
      .label {
        min-width: 80px;
        padding-right: 11px;
        text-align: right;
        color: #999;
      }
      .xtx-form input {
        outline: none;
      }
      .field {
        width: 320px;
        height: 50px;
        position: relative;
        .input {
          width: 320px;
          height: 50px;
          line-height: 50px;
          padding: 0 10px;
          border: 1px solid #e4e4e4;
          &::placeholder {
            color: #ccc;
          }
        }
      }
    }
  }
  .xtx-city {
    width: 320px;
    :deep(.select) {
      height: 50px;
      line-height: 48px;
      display: flex;
      padding: 0 10px;
      justify-content: space-between;
      .placeholder {
        color: #ccc;
      }
      i {
        color: #ccc;
        font-size: 18px;
      }
      .value {
        font-size: 14px;
      }
    }
    :deep(.option) {
      top: 40px;
    }
  }
}
</style>
